<template>
  <div id="node">
    <div class="container" :class="fold ? 'fold' : 'unfold'" v-html="content"></div>
    <a @click="handleFold" v-show="fold">展开→</a>
    <a @click="handleFold" v-show="!fold">←收起</a>
  </div>
</template>

<script>
export default {
  name: 'LongText',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      fold: true
    }
  },
  methods: {
    handleFold () {
      this.fold = !this.fold
    }
  }
}
</script>

<style scoped>
  .container {
    width : 80em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .container.fold {
    -webkit-line-clamp: 3;
  }

  .container.unfold {
    -webkit-line-clamp: 100;
  }
</style>
